<template>
  <ElInput
    v-model="data.value"
    :type="type"
    :placeholder="placeholder"
    :rows="3"
    :maxlength="data.text.maxLength"
    :readonly="readonly"
    clearable
    @blur="data.value = data.value.trim()"
  >
    <WidgetSourceIcon
      v-if="data.sourceItem && data.sourceItem.icon"
      slot="prefix"
      class="el-input__icon"
      :data="data"
    />
  </ElInput>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { WidgetType } from '@/types'
import { Widget } from '@/models'
import { getTextPlaceholder } from './utils'
import WidgetSourceIcon from '@/components/widget-source/WidgetSourceIcon.vue'

/** 文本框填写 */
export default defineComponent({
  name: 'FaInputFill',

  components: { WidgetSourceIcon },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否只读 */
    readonly: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    return {
      /** input 类型 */
      type: computed(() => (props.data.type === WidgetType.TEXTAREA ? 'textarea' : undefined)),

      /** 占位 */
      placeholder: computed(() => getTextPlaceholder(props.data))
    }
  }
})
</script>
